<template>
    <div class="bg">
   <topNav :txt="txt" :mode="mode" @showMode='showMode'></topNav>
   <div class="search_box" @click="showtime = true" >
       <van-icon name="search" size="20"  color='#999999'/>
       <span>搜索</span>
   </div>
   <div class="tip_title">公司员工名单</div>
   <div class="main">
       <div class="list" v-for="(item,index) in 10" :key="index" @click="skip('/daka')"><span>阿明</span></div>
   </div>
   <div class="rigth_box"><span v-for="item in list" :key="item">{{item}}</span></div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
<div class="pop_box" v-if="showVip">
    <div class="pop" @click="skips('/becomevip')">
        <span class="pop_title">VIP专区</span>
        <span class="pop_skips">立即开通VIP会员</span>
    </div>
</div>
<van-popup v-model="showtime" position="bottom">
   <van-datetime-picker
        v-model="currentDate"
        type="month-day"
        title="请选择时间"
        
        :formatter="formatter"
        @confirm='confirm'
        @cancel="cancel"
        />
    </van-popup>

    </div>
</template>
<script>
import topNav from "@/components/return"

export default {
       components: {
    topNav
  },
  data() {
    return {
        showVip:false,
        mode:2,
        txt:'总考勤',
        show:false,
         actions:[{name:'设置签到时间',id:1}
         ],
         showtime:false,
         list:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
    };
  },
  
   methods: {
       formatter(){

       },
       confirm(){
       this.showtime = false
       },
       cancel(){
 this.showtime = false
       },
      showMode(){
           this.show = true
      },
       onSelect(item){
         this.$router.push({path:'/setsigntime'})
         this.show = false
    },
    skip(){
        if(this.txt == '总考勤'){
       this.skips('/daka')
        }

    if(this.txt == '总台回访'){
        this.skips('/huifang')
    }
     if(this.txt == '个人成交率数据'){
        this.skips('/gerenindex')
    }
     if(this.txt == '总基盘客户'){
        this.skips('/onejipan')
    }
    
    
    },
    skips(path){
        if(path == '/becomevip'){
        localStorage.setItem('pay',1)
        }
      this.$router.push({path:path})
      
    }
    
       
  },
  activated(){
console.log('哈哈哈哈哈')
  },
  created(){
    //   
    let pay =  localStorage.getItem('pay')
    
    if(pay != null && pay == 1){
        console.log('hahhaha====')
     this.$dialog.alert({
        title: '',
        message: '欢迎使用中回访功能，在这里您能查看所有员工回访情况',
        confirmButtonText:'我知道了',
        confirmButtonColor:'#06C35F'
        }).then(() => {
        // on close
         localStorage.setItem('pay',2)
        });
    }
    console.log('pay',pay==null)
      if(this.$route.query.name){
          this.txt = this.$route.query.name
          this.mode = 2
          if(this.txt == '总考勤'){
              this.mode = 1
          }
          if(this.txt == '总台回访' && pay !=1){
            this.showVip = true
          }
      }
       
      console.log('000000',this.$route.query.name)
  }
}
</script>
<style  scoped>
.bg{
    min-height:100vh ;
     background: #EDEDED;
}
.search_box{
    margin:10px 20px;
    padding: 5px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:20px ;
    color: #999999;
}
.search_box span{
    margin-left: 5px;
}
.tip_title{
    margin:10px 20px;
    color: #999999;
    font-size: 14px;

}
.main{
    background: #fff;
    padding-left: 20px;
}
.list{
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #e3e4e5;
}
.rigth_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    top: 20%;
     /* transform: translate(-50%, -45%); */
     color: #7D7D7D;
     font-size: 10px;
     
}
.van-action-sheet__item {
    line-height: 22px;
    color: red;
}
.pop_box{
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}
.pop{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
background: #fff;
height: 120px;
width: 50%;
border-radius: 10px;
}
.pop_title{
    color: red;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
}
.pop_skips{
    color: #06C25F;
}
.van-dialog__confirm {
    color: #06C25F;
}
</style>